<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设备参数报警</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：设备管理 > 设备参数报警</span></p>
	            
	            <!------ tab标签 ------>
	            <div class="layui-tab layui-tab-card">
				    <ul class="layui-tab-title">
				    	<li class="layui-this">实时报警信息</li>
					    <li>历史报警信息</li>
					    <li>报警规则</li>
				    </ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
					    	<div class="content">
					    		<!-- 搜索区 -->
					            <div class="search_area">
				                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>实时报警信息查询条件</span></h4>
				                    <div class="select_area">
				                        <div class="select_text clear">
				                        	<div class="label_input">
												<label class="contentText">所属产线：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">产线1</option>
													<option value="">产线2</option>
												</select>
											</div>
											<div class="label_input">
												<label class="contentText">设备名称：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">设备1</option>
													<option value="">设备2</option>
												</select>
											</div>
				                        	<div class="label_input">
					                            <label class="contentText">报警时间段：</label> <input type="text" name="" class="dateControl" id="" readonly="readonly" />
				                        		<label class="contentText">至</label> <input type="text" name="" class="dateControl" id="" readonly="readonly" />
				                        	</div>
				                            <div class="floatLeft">
					                            <button class="btn_search bgd_blue_search">查询</button>
					                            <button class="btn_clear bgd_white_clear">重置</button>
				                            </div>
				                        </div>
				                    </div>
					            </div>
					            <!-- 列表区 -->
					            <div class="show_list">
				                	<div class="title_operate">
				                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>实时报警信息列表</span></h4>
				                	</div>
				                	<div class="list_area clear">
				                        <!-- 信息列表区 -->
				                        <div class="info_area">
			                        		<table class="tablelist" border="1" cellspacing="0" cellpadding="0">
				                                <tbody>
				                                    <tr class="menuText list_head">
														<th>设备名称</th>
				                                        <th>设备编号</th>
														<th>所属产线</th>
														<th>报警参数</th>
														<th>报警值</th>
														<th>报警时间</th>
				                                        <th>报警类型</th>
														<th>报警等级</th>
														<th>操作</th>
				                                    </tr>
				                                </tbody>
				                                <tbody class="tablelist" id="tableflow">
				                                    <tr class="listTableText list_list">
														<td class="warningRed">设备A</td>
														<td class="warningRed">equ12138</td>
				                                        <td class="warningRed">产线1</td>
				                                        <td class="warningRed">参数一</td>
				                                        <td class="warningRed">30</td>
				                                        <td class="warningRed">2020-02-20 16:20:50</td>
				                                        <td class="warningRed">类型1</td>
				                                        <td class="warningRed">一级报警</td>
				                                        <td class="warningRed"><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
														<td>设备A</td>
														<td>equ12138</td>
				                                        <td>产线1</td>
				                                        <td>参数二</td>
				                                        <td>30</td>
				                                        <td>2020-02-20 16:20:50</td>
				                                        <td>类型1</td>
				                                        <td>二级报警</td>
				                                        <td><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
														<td>设备A</td>
														<td>equ12138</td>
				                                        <td>产线1</td>
				                                        <td>参数三</td>
				                                        <td>30</td>
				                                        <td>2020-02-20 16:20:50</td>
				                                        <td>类型1</td>
				                                        <td>二级报警</td>
				                                        <td><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
														<td>设备A</td>
														<td>equ12138</td>
				                                        <td>产线1</td>
				                                        <td>参数四</td>
				                                        <td>30</td>
				                                        <td>2020-02-20 16:20:50</td>
				                                        <td>类型1</td>
				                                        <td>二级报警</td>
				                                        <td><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
														<td>设备A</td>
														<td>equ12138</td>
				                                        <td>产线1</td>
				                                        <td>参数五</td>
				                                        <td>30</td>
				                                        <td>2020-02-20 16:20:50</td>
				                                        <td>类型1</td>
				                                        <td>二级报警</td>
				                                        <td><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
														<td>设备A</td>
														<td>equ12138</td>
				                                        <td>产线1</td>
				                                        <td>参数六</td>
				                                        <td>30</td>
				                                        <td>2020-02-20 16:20:50</td>
				                                        <td>类型1</td>
				                                        <td>二级报警</td>
				                                        <td><a onclick="rolledYieldShow()">处理</a></td>
				                                    </tr>
				                                </tbody>
				                            </table>
				                        </div>
				                        <!-- 页码区域 -->
					                    <div class="page_area contentText clear">
					                    	<div class="page_sum">
					                    		共<span class="page_number"> 3 </span>页&emsp;每页 10 条&emsp;共<span class="info_sum"> 27 </span>条记录
					                    	</div>
					                        <div class="page_jump">
					                        	<span>跳转到&emsp;第</span>
					                        	<input type="text" name="" id="" value="" />
					                        	<span>页&emsp;</span>
					                        	<button>Go</button>
					                        </div>
					                        <div class="page-pull-right async-page">
					                            <button>上一页</button>
					                            <button class="select_page">1</button>
					                            <button>2</button>
					                            <button>3</button>
					                            <button style="color: rgb(30, 30, 30);">▪▪▪</button>
					                            <button>98</button>
					                            <button>99</button>
					                            <button>100</button>
					                            <button>下一页</button>
					                        </div>
					                    </div>
				                    </div>
				                </div>
					    	</div>
					    </div>
					    <div class="layui-tab-item">
					    	<div class="content">
					    		<!-- 搜索区 -->
					            <div class="search_area">
				                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>历史报警信息查询条件</span></h4>
				                    <div class="select_area">
				                        <div class="select_text clear">
				                        	<div class="label_input">
												<label class="contentText">所属产线：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">产线1</option>
													<option value="">产线2</option>
												</select>
											</div>
											<div class="label_input">
												<label class="contentText">设备名称：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">设备1</option>
													<option value="">设备2</option>
												</select>
											</div>
				                        	<div class="label_input">
					                            <label class="contentText">报警时间段：</label> <input type="text" name="" class="dateControl" id="" readonly="readonly" />
				                        		<label class="contentText">至</label> <input type="text" name="" class="dateControl" id="" readonly="readonly" />
				                        	</div>
				                            <div class="floatLeft">
					                            <button class="btn_search bgd_blue_search">查询</button>
					                            <button class="btn_clear bgd_white_clear">重置</button>
				                            </div>
				                        </div>
				                    </div>
					            </div>
					            <!-- 列表区 -->
					            <div class="show_list">
				                	<div class="title_operate">
				                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>历史报警信息图表</span></h4>
				                	</div>
				                	<div class="list_area clear">
				                        <!-- 图表区 -->
				                        <div class="info_area_left1" style="width: 30%;">
				                        	<!-- echarts图表显示区域 -->
				                        	<div class="charts1" id="left" style="width: 440px;height: 260px;z-index: 0;">
				                        		
				                        	</div>
				                        </div>
				                        <!-- 信息列表区 -->
				                        <div class="info_area_right1" style="width: 68%;">
			                        		<table class="tablelist" border="1" cellspacing="0" cellpadding="0">
				                                <tbody>
				                                    <tr class="menuText list_head">
				                                        <th>设备名称</th>
				                                        <th>设备编号</th>
														<th>所属产线</th>
														<th>报警参数</th>
														<th>报警值</th>
														<th>报警时间</th>
				                                        <th>报警类型</th>
														<th>报警等级</th>
														<th>报警处理人</th>
														<th>报警处理时间</th>
														<th>备注</th>
				                                    </tr>				            
				                                </tbody>
				                                <tbody class="tablelist" id="tableflow">
				                                    <tr class="listTableText list_list">
				                                        <td>设备A</td>
														<td>equ12138</td>
														<td>产线1</td>
														<td>参数1</td>
														<td>100</td>
														<td>2018-09-04 20:29:03</td>
				                                        <td>上限报警</td>
				                                        <td>二级报警</td>
				                                        <td>张三</td>
				                                        <td>2018-09-04 21:29:03</td>
				                                        <td></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
				                                        <td>设备A</td>
														<td>equ12138</td>
														<td>产线1</td>
														<td>参数1</td>
														<td>100</td>
														<td>2018-09-04 20:29:03</td>
				                                        <td>上限报警</td>
				                                        <td>二级报警</td>
				                                        <td>张三</td>
				                                        <td>2018-09-04 21:29:03</td>
				                                        <td></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
				                                        <td>设备A</td>
														<td>equ12138</td>
														<td>产线1</td>
														<td>参数1</td>
														<td>100</td>
														<td>2018-09-04 20:29:03</td>
				                                        <td>上限报警</td>
				                                        <td>二级报警</td>
				                                        <td>张三</td>
				                                        <td>2018-09-04 21:29:03</td>
				                                        <td></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
				                                        <td>设备A</td>
														<td>equ12138</td>
														<td>产线1</td>
														<td>参数1</td>
														<td>100</td>
														<td>2018-09-04 20:29:03</td>
				                                        <td>上限报警</td>
				                                        <td>二级报警</td>
				                                        <td>张三</td>
				                                        <td>2018-09-04 21:29:03</td>
				                                        <td></td>
				                                    </tr>
				                                </tbody>
				                            </table>
				                            <!-- 页码区域 -->
					                    <div class="page_area contentText clear">
					                    	<div class="page_sum">
					                    		共<span class="page_number"> 3 </span>页&emsp;每页 10 条&emsp;共<span class="info_sum"> 27 </span>条记录
					                    	</div>
					                        <div class="page_jump">
					                        	<span>跳转到&emsp;第</span>
					                        	<input type="text" name="" id="" value="" />
					                        	<span>页&emsp;</span>
					                        	<button>Go</button>
					                        </div>
					                        <div class="page-pull-right async-page">
					                            <button>上一页</button>
					                            <button class="select_page">1</button>
					                            <button>2</button>
					                            <button>3</button>
					                            <button style="color: rgb(30, 30, 30);">▪▪▪</button>
					                            <button>98</button>
					                            <button>99</button>
					                            <button>100</button>
					                            <button>下一页</button>
					                        </div>
					                    </div>
				                        </div>
				                    </div>
				                </div>
					    	</div>
						</div>
					    
					    <div class="layui-tab-item">
					    	<div class="content">
					    		<!-- 搜索区 -->
					            <div class="search_area">
				                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>报警规则查询条件</span></h4>
				                    <div class="select_area">
				                        <div class="select_text clear">
				                        	<div class="label_input">
												<label class="contentText">所属产线：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">产线1</option>
													<option value="">产线2</option>
												</select>
											</div>
											<div class="label_input">
												<label class="contentText">设备名称：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">设备1</option>
													<option value="">设备2</option>
												</select>
											</div>
				                            <div class="floatLeft">
					                            <button class="btn_search bgd_blue_search">查询</button>
					                            <button class="btn_clear bgd_white_clear">重置</button>
				                            </div>
				                        </div>
				                    </div>
					            </div>
					            <!-- 列表区 -->
					            <div class="show_list">
				                	<div class="title_operate">
				                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>报警规则列表</span></h4>
				                		<div class="operate_area">
				                            <a href="warningRuleAdd.html" class="bgd_add img_hand">增加</a>
				                            <a onclick="delUserGroup()" class="bgd_delete img_hand">删除</a> 
				                        </div>
				                	</div>
				                	<div class="list_area clear">
				                        <!-- 信息列表区 -->
				                        <div class="info_area">
			                        		<table class="tablelist" border="1" cellspacing="0" cellpadding="0">
				                                <tbody>
				                                    <tr class="menuText list_head">
				                                    	<th class="checkSelectAll"></th>
				                                        <th>设备名称</th>
				                                        <th>设备编号</th>
														<th>所属产线</th>
														<th>报警参数</th>
														<th>报警上限</th>
														<th>报警下限</th>
														<th>报警等级</th>
														<th>报警处理人</th>
														<th>备注</th>
				                                    </tr>
				                                </tbody>
				                                <tbody class="tablelist" id="tableflow">
				                                    <tr class="listTableText list_list">
				                                    	<td><input type="checkbox" class="input_checkBox" name="ids" id="" value=""></td>
				                                        <td><a class="cursor editBlue" href="warningRuleUpdate.html">设备A</a></td>
				                                        <td>equ12138</td>
														<td>产线1</td>
														<td>气压</td>
														<td>1000</td>
				                                        <td>600</td>
				                                        <td>lev4</td>
														<td>张三</td>
														<td></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
				                                    	<td><input type="checkbox" class="input_checkBox" name="ids" id="" value=""></td>
				                                        <td><a class="cursor editBlue" href="warningRuleUpdate.html">设备A</a></td>
				                                        <td>equ12138</td>
														<td>产线1</td>
														<td>气压</td>
														<td>1000</td>
				                                        <td>600</td>
				                                        <td>lev4</td>
														<td>张三</td>
														<td></td>
				                                    </tr>
				                                    <tr class="listTableText list_list">
				                                    	<td><input type="checkbox" class="input_checkBox" name="ids" id="" value=""></td>
				                                        <td><a class="cursor editBlue" href="warningRuleUpdate.html">设备A</a></td>
				                                        <td>equ12138</td>
														<td>产线1</td>
														<td>气压</td>
														<td>1000</td>
				                                        <td>600</td>
				                                        <td>lev4</td>
														<td>张三</td>
														<td></td>
				                                    </tr>
				                                </tbody>
				                            </table>
				                        </div>
				                        <!-- 页码区域 -->
					                    <div class="page_area contentText clear">
					                    	<div class="page_sum">
					                    		共<span class="page_number"> 3 </span>页&emsp;每页 10 条&emsp;共<span class="info_sum"> 27 </span>条记录
					                    	</div>
					                        <div class="page_jump">
					                        	<span>跳转到&emsp;第</span>
					                        	<input type="text" name="" id="" value="" />
					                        	<span>页&emsp;</span>
					                        	<button>Go</button>
					                        </div>
					                        <div class="page-pull-right async-page">
					                            <button>上一页</button>
					                            <button class="select_page">1</button>
					                            <button>2</button>
					                            <button>3</button>
					                            <button style="color: rgb(30, 30, 30);">▪▪▪</button>
					                            <button>98</button>
					                            <button>99</button>
					                            <button>100</button>
					                            <button>下一页</button>
					                        </div>
					                    </div>
				                    </div>
				                </div>
					    	</div>
					    </div>
					</div>
				</div>
			</div>
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
			
			<!-- 实时报警信息确认弹框 -->
			<div class="rolledYield hidden">
				<div class="rolledYield_content" style="height: 250px;margin: 220px auto;">
					<p class="rolledYield_title">实时报警信息处理
						<img onclick="rolledYieldClose();" src="../../img/list/delete.png"/>
					</p>
		            <div class="show_list">
	                	<div class="write_area">
	                        <form id="addFrom" action="" method="post">
	                            <table class="contentText" border="1" cellspacing="0" cellpadding="0" width="99%">
	                                <tbody>
	                                    <tr>
	                                        <th>当前时间：</th>
	                                        <td>
	                                        	2020-02-13 13:06:33 
	                                        </td>
	                                        <th>处理人：</th>
	                                        <td>
	                                        	张三
	                                        </td>
	                                    </tr>
	                                    <tr>
	                                        <th>备注：</th>
	                                        <td colspan="3">
	                                        	<textarea style="width: 95%;height: 100px;"></textarea>
	                                        </td>
	                                    </tr>
	                                </tbody>
	                            </table>
	                        </form>
	                        <!-- 保存、重置按钮区 -->
	                        <div align="center" class="btn_submit">
	                            <a class="bgd_blue_two img_hand contentText">确定</a>
	                            <a onclick="rolledYieldClose();" class="bgd_white_two img_hand"> 返回 </a>
	                        </div>
	                    </div>
	                </div>
				</div>
			</div>
			
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/common/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/3rd/jquery-ui.js" type="text/javascript"></script>
	<script src="../../js/echarts.min.js"></script>
	<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");   
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");   
			}
		);
		
		// 日期控件
		$(function(){
	        $(".dateControl").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/button/calendar.png",
	 		 	buttonImageOnly:false
	        });
	     });
		
		//点击右上角关闭弹框
		function rolledYieldClose(){
			$(".rolledYield").css("display", "none");
		}
		//点击计划显示弹框
		function rolledYieldShow(){
			$(".rolledYield").css("display", "block");
		}
		
		//删除规则
	    function delUserGroup() {
			
	        var list = [];
	        var checks = $("input[name='ids']:checked");
	        $.each(checks, function(index, obj) {
	            list.push(obj.id);
	        });
	        if (!list.length > 0) {
	            alert("请选择要删除的内容");
	            return;
	        }
	        if (!confirm("确定要删除吗？")) {
	            return;
	        }
	        alert("提醒:删除时，正在使用的用户组将无法删除！");
	        $.ajax({
	            type : 'POST',
	            url : 'userGroup/delUserGroup',
	            data : JSON.stringify(list),
	            contentType : 'application/json; charset=utf-8',
	            async : true,
	            cache : false,
	            success : function(data) {
	                alert(data == 'success' ? "删除成功" : "被使用：无法删除!!!");
	                if (data != 'success') {
	                    return;
	                }
	
	                var current = PageUtils._currentPage['userGroupPage'];
	                PageUtils.pageClick(current, 'userGroupPage');
	            }
	
	        });
	    }
	    
	    layui.use('element', function(){
			var $ = layui.jquery, 
			    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			  
		    //触发事件：添加、删除、切换
		    var active = {
			    tabAdd: function(){
			        //新增一个Tab项
			        element.tabAdd('demo', {
			        	title: '新选项'+ (Math.random()*1000|0), 
			        	content: '内容'+ (Math.random()*1000|0),
			        	id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			        })
			    },
			    tabChange: function(){
			        //切换到指定Tab项
			        element.tabChange('demo', '22'); //切换到：“用户管理”
			    }
		    };
		  
		    $('.site-demo-active').on('click', function(){
		    	var othis = $(this), 
		        	type = othis.data('type');
		    	active[type] ? active[type].call(this, othis) : '';
		    });
		  
		    //Hash地址的定位
		    var layid = location.hash.replace(/^#test=/, '');
		    element.tabChange('test', layid);
		  
		    element.on('tab(test)', function(elem){
		   		location.hash = 'test='+ $(this).attr('lay-id');
		    });
		});

		//显示图表
		function showGraph3(){
			var myChart = echarts.init(document.getElementById('left'));
			option = {
				title: {
					text: '设备报警模式占比',
					x:'center',
        			y:'top',
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: '70%',  //图例距离左的距离
					y: 'center',  //图例上下居中
					data: ["一级报警","二级报警","三级报警",]
					},
				color: ['#CD5C5C', 'blue','#9ACD32'],
				stillShowZeroSum: false,
				series: [
					{
						name: '报警分布',
						type: 'pie',
						radius: '60%',
						center: ['30%', '55%'],
						data: [
							{value: 1, name: '一级报警'},
							{value: 3, name: '二级报警'},
							{value: 7, name: '三级报警'},
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(128, 128, 128, 0.5)'
							}
						}
					}
				]
			};

			myChart.setOption(option);	
		}

		showGraph3();
	</script>
</html>
